<template>
	<div class="minor-head">
		<nav>
			<ul>
				<li>
					<a href="javascript:void(0)"class='active'>推荐</a>
				</li>
				<li>
					<a href="javascript:void(0)">排行榜</a>
				</li>
				<li>
					<a href="javascript:void(0)">歌单</a>
				</li>
				<li>
					<a href="javascript:void(0)">主博电台</a>
				</li>
				<li>
					<a href="javascript:void(0)">歌手</a>
				</li>
				<li>
					<a href="javascript:void(0)">新碟上架</a>
				</li>
			</ul>
		</nav>
		<div class='home_main'>
			<div class='main'>
				<v-slider></v-slider>
				<!-- 轮播图插件 -->
			</div>
			<div class="minor-content">
				<!-- 轮播图下面的内容-->
				<div class="minor-left">
					<!-- 左边的歌单 -->
					<nav>
						<ul>
							<span class='glyphicon glyphicon-record'></span>
							<h2><a href="">热门推荐</a></h2>
							<li><a href="http://music.163.com/#/discover/playlist/?cat=华语">华语</a></li>
							<li><a href="">流行</a></li>
							<li><a href="">摇滚</a></li>
							<li><a href="">民谣</a></li>
							<li><a href="">电子</a></li>
						</ul>
						<span class='g_right'>跟多  <span class='glyphicon glyphicon-option-horizontal'></span></span>
					</nav>
					<div class="songlist-a">
						<v-songlist></v-songlist>
						<!-- 歌单泪飙组件 -->
						<!-- 广告 -->
						<img src="https://haitaoad.nosdn.127.net/ad.bid.material_bbe73a17c9ce403c80b14afd6a6a1fe9?imageView&thumbnail=689x75&quality=100" alt="">
					</div>
					<!-- 新碟商家 -->
					<nav class='n-top'>
						<ul>
							<span class='glyphicon glyphicon-record'></span>
							<h2><a href="">新碟上架</a></h2>
						</ul>
						<span class='g_right'>更多  <span class='glyphicon glyphicon-option-horizontal'></span></span>
					</nav>
					<div class="new-song">
						<v-newsong></v-newsong>
					</div>
					<!-- 榜单 -->
					<nav class='n-top'>
						<ul>
							<span class='glyphicon glyphicon-record'></span>
							<h2><a href="">榜单</a></h2>
						</ul>
						<span class='g_right'>更多  <span class='glyphicon glyphicon-option-horizontal'></span></span>
					</nav>
					<div class="s-ranking"> <!--排行榜-->
						<v-ranking  v-bind:playsongs = 'playsong'></v-ranking>
					</div>
				</div>
				<!--歌单右边的-->
				<div class="minor-right">
					<v-songright></v-songright>
					<!-- 歌单左边的 -->
				</div>
			</div>
		</div>
		<!--底部-->
		<v-footer></v-footer>    
	</div>
</template>

<script>
import Songlist from "./Songlist";  //歌单列表
import Footer from "./Footer";     //脚步的
import Songright from "./Songright";  //音乐人
import Newsong from "./Newsong";  //新碟上架
import Ranking from './Rankinglist' //排行榜
import Slider from '../Shine/Slider' //轮播图插件

export default {
	name: 'Home',
	data() { return {} },
	components: {
		'v-songlist': Songlist,
		'v-footer': Footer,
		'v-songright': Songright,
		'v-newsong': Newsong,
		'v-ranking':Ranking,
		'v-slider' :Slider
	},
	methods: {},
 	mounted (){},
}
</script>

<style scoped>
#audio{
	width: 980px;
	height: 50px;
	margin-left: 400px;
	border: 1px solid #000;
	/*background: #ccc;*/
}

/*热门推荐导航*/
.minor-content {
	width: 980px;
	margin: 0 auto;
	box-shadow: 1px 0 1px 0px #ccc, -1px 0 1px 0px #ccc;
	display: flex;
	padding-bottom: 50px;
	/*height: 1800px;*/
}
.minor-content .minor-left nav {
	display: flex;
	position: relative;
	padding: 20px 15px 12px 15px;
	margin: 0 12px;
	border-bottom: 2px solid rgb(193, 13, 12);
}

nav.n-top {
	position: relative;
	top: 20px;
}

.minor-right {
	box-shadow: -1px 0 1px 0px #ccc;
}

.minor-content .minor-left {
	width: 730px;
	/*height: 336px;*/
}

.minor-content .minor-left nav ul {
	display: flex;
	padding: 0 5px 0px 5px;
}

.minor-content .minor-left nav ul a {
	padding: 0 12px;
	color: rgb(123, 123, 123);
}

.minor-content .minor-left nav ul li a {

	padding: 0 14px;
}

.minor-content .minor-left nav ul i {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 1px solid #000;
}

.minor-content .minor-left nav ul h2 {
	font-size: 16px;
	font-weight: 600px;
}

.glyphicon {
	color: rgb(193, 13, 12);
}

.g_right {
	position: absolute;
	right: 10px;
}

.songlist-a {
	text-align: center;
}

.new-song {
	/*榜单*/
	margin-top: 20px;
}
.play{
	height: 50px;
	width: 100%;
	border: 1px solid #000;
	position: fixed;
	bottom: 0;
}
</style>
